<template>
<van-popup v-model:show="params.show" teleport="#app" :style="{ width: '80%' }" @click-overlay="fnClose">
    <div class="text-center ftn16 bg-green text-f padded-10">查看买号</div>
<div class="bg-f padded-10">
    <van-cell-group>
    <van-cell title="买家帐号" :value="account.username"/>
    <van-cell title="平台" :value="account.typename"/>
    <van-cell title="京享值" :value="account.value" v-if="Number(account.type) == 2"/>
    <van-cell title="淘宝等级" center v-if="Number(account.type) == 1">
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
        <van-image
        height="10"
        :src="levels[account.level]"
        />
    </template>
    </van-cell>
    <van-cell title="等级截图" center v-if="Number(account.type) == 1 || Number(account.type) == 2">
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
        <van-image
            width="60"
            height="60"
            :src="account.level_image"
        />
    </template>
    </van-cell>
    <van-cell title="收货城市" :value="`${account.province}${account.city}${account.area}`"  />
    <van-cell title="性别" :value="genders[Number(account.gender) - 1]"  />
    <van-cell title="消费层级" :value="consumeList[Number(account.consume) - 1]"  />
    <van-cell title="人群标签" :value="labelList[Number(account.label) - 1]"  />
    <van-cell title="常购类目" :value="account.category"  />
    </van-cell-group>
    <!-- <van-button type="primary" size="large" @click="fnClose"
    >关闭</van-button> -->
</div>
</van-popup>
</template>
<script lang="ts">
import { defineComponent, ref, watch, onMounted } from "vue";
import { getAccountData } from "@/service/account";
import {useStore} from '@/stores/store'
import { consumeList, labelList, levels } from "@/plugins/common";
import { fnGetCategory } from "@/service/index";
export default defineComponent({
    props: {
        show: {
            type: Boolean,
            required: true,
        },
        id: {
            type: Number
        },
    },
    emits: ['close'],
    setup(props: any, ctx) {
        let {show, id} = props;
        const params = ref({show, id}), categoryList = ref([]);
        const store = useStore(), account = ref({
            type: '',
            username: '',
            typename: '',
            province: '',
            city: '',
            area: '',
            gender: '1',
            level: 0,
            label: '',
            consume: '',
            category: '',
            level_image: '',
            value: ''
        }), genders = [
            "男",
            "女"
        ]
        watch(props, (newVal) => {
            let {show, id} = newVal;
            params.value = {show, id};
            getData();
        })
        const fnClose = () => {
            params.value.show = false;
            ctx.emit('close')
        }

        const getData = () => {
            getAccountData({id: params.value.id, uid: store.state.user.uid}).then(res => {
                if (res && res.status) {
                    account.value = res.data;
                    account.value.category= account.value.category.split(',').map(item => categoryList.value.filter((i: any) => Number(item) == i.id)[0]).map((item: any) => item.name).join(',');
                }
            })
        }

        onMounted(() => {
            fnGetCategory().then((res) => {
                if (res) {
                    categoryList.value = res.data;
                }
            });
        })
        return {
            params,
            account,
            genders,
            consumeList, 
            labelList,
            levels,
            fnClose
        }
    }
})
</script>